<head>
<meta charset="utf-8">
</head>

<link rel="stylesheet" href="css/joint.css" />

<body>
	<div id="paper" class="joint-paper joint-theme-default" style="height:100%;width:100%; overflow: hidden;border:1px solid gray;">

	</div>
</body>

<script src="js/jquery.js"></script>
<script src="js/lodash.js"></script>
<script src="js/backbone.js"></script>
<script src="js/joint.min.js"></script>

<script>
var graph = new joint.dia.Graph(); 
 
var paper = new joint.dia.Paper({
    el: $('#paper'),
	height: $('#paper').height(),
	width: $('#paper').width(),
    gridSize: 1,
    model: graph,
    perpendicularLinks: true,
    restrictTranslate: true
});

var member = function(id, x, y, rank, name, image, background, textColor) {
    textColor = textColor || "#000";

    var nameLine2 = "";
    if (name.length > 5) {
    	nameLine2 = name.substring(5);
    	name = name.substring(0, 5);
    }	
	
    var cell = new joint.shapes.org.Member({
        position: { x: x, y: y },
        id: id,
        attrs: {
            '.card': { fill: background, stroke: '#333', "stroke-width":"1"},
              image: { 'xlink:href': 'images/'+ image, "magnet":true, opacity: 0.7 },
            '.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
            '.name': { text: name, fill: textColor, 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0 }
        }
    });
	
    if (nameLine2.length > 0) {
    	cell.attributes.size.height = 45	
    }	
	
    graph.addCell(cell);
    return cell;
};


function link(sourceId, targetId, label, vertices, linkId) {
    var cell = new joint.shapes.fsa.Arrow({
        source: { id: sourceId },
        target: { id: targetId },
        id: linkId,
        labels: [{ position: .5, attrs: { text: { text: label || '', 'font-weight': 'bold' } } }],
        vertices: vertices || []
    });
    graph.addCell(cell);
    return cell;
}

joint.dia.Link.define('fsa.Arrow', {
    attrs: { '.marker-source': { stroke: '#202120', fill: '#202120', d: 'M 3 0 C 4.5 0 6 1.5 6 3 C 6 4.5 4.5 6 3 6 C 1.5 6 0 4.5 0 3 C 0 1.5 1.5 0 3 0 Z' },
             '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' },
             '.connection': { stroke: 'black' } },
    smooth: true
});

member("yyy", 100, 70, 'XXXXX', 'Bart Simpson', 'male.png', '#30d0c6', '#f1f1f1');
member("xxx", 500, 70, 'YYYYY', 'Homer Simpson', 'male.png', '#7c68fd', '#f1f1f1');
member("zzz", 100, 300, 'jim', 'Homer Simpson', 'male.png', '#7c68fd', '#f1f1f1');

link("yyy", "xxx", "", [], "aaa");
link("xxx", "zzz", "", [], "bbb");
link("zzz", "yyy", "", [], "ccc");

var token = V('circle', { r: 5, fill: 'red' });
graph.getCell("aaa").findView(paper).sendToken(token, 1 * 1000, function() {
	graph.getCell("bbb").findView(paper).sendToken(token, 1 * 1000, function() {
		graph.getCell("ccc").findView(paper).sendToken(token, 1 * 1000, function() {
			
			
		});	
	});	
});

moving();
function moving() {
	graph.getCell("aaa").findView(paper).sendToken(token, 1 * 1000, function() {
		graph.getCell("bbb").findView(paper).sendToken(token, 1 * 1000, function() {
			graph.getCell("ccc").findView(paper).sendToken(token, 1 * 1000, function() {
				moving();
			});	
		});	
	});
}


</script>
